<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title></title>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <script type="text/javascript" src="../layui/layui.js"></script>
</head>
<body class="layui-layout-body">
<div>
    <div class="layui-inline">
        <!--       <input type="text" name="title" required lay-verify="required" placeholder="请输入用户id" autocomplete="off" class="layui-input" style="width:125px;" >-->
    </div>
    <div class="layui-inline">
        <!--        <button type="button" class="layui-btn"  id="findById">查找用户</button>-->
    </div>

</div>
<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/javascript">



    var tableInit = function(url){
        layui.use('table', function(){
            var $ = layui.$
            var table = layui.table;

            table.render({
                elem: '#test'
                ,url:url
                ,parseData: function(res){ //res 即为原始返回的数据
                    return {
                        "code": 0, //解析接口状态
                        "msg": "OK", //解析提示文本
                        "count": 100, //解析数据长度
                        "data": res //解析数据列表
                    };
                }
                ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                ,cols: [[
                    {field:'user_id', width:180, title: '用户ID', sort: true}
                    ,{field:'name', width:180, title: '用户名'}
                    ,{field:'password', width:180, title: '密码', sort: true}
                    ,{field:'phone', width:180, title: '电话', sort: true}
                    ,{field:'email', width:180, title: '电子邮件', sort: true}
                    ,{field:'register_date', width:180, title: '注册日期', sort: true}
                    ,{field:'level', width:180, title: '等级', sort: true}



                    ,{fixed: 'right', width:250, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
                ]]
            });

            //监听工具条
            table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

                if(layEvent === 'detail'){ //查看
                    //do
                    window.location.href="user_register.html";
                } else if(layEvent === 'del'){ //删除
                    layer.confirm('真的删除行么', function(index){
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        layer.close(index);
                        //向服务端发送删除指令
                        var user_id = obj.data.user_id;
                        $.ajax({
                            url:"http://localhost:8080/webDemo_war_exploded/DelUserServlet?user_id="+user_id,
                            success:function(res){
                                console.log(res)
                            }
                        })
                    });
                } else if(layEvent === 'edit'){ //编辑
                    //do something

                    //同步更新缓存对应的值
                    obj.update({
                        username: '123'
                        ,title: 'xxx'
                    });
                } else if(layEvent === 'LAYTABLE_TIPS'){
                    layer.alert('Hi，头部工具栏扩展的右侧图标。');
                }
            });
        });
    }

    tableInit("http://localhost:8080/webDemo_war_exploded/findIllegalUserServlet");

    //第一种：主动加载jquery模块
    layui.use(['jquery', 'layer'], function(){
        var $ = layui.$ //重点处
            ,layer = layui.layer;

        //后面就跟你平时使用jQuery一样
        $('#findById').on('click',function(res){
            var id = $(this).parent().parent().find(".layui-input").val();
            tableInit("http://localhost:8080/webDemo_war_exploded/findOneUserServlet?user_id="+user_id)
        })
    });

</script>
<script type="text/html" id="barDemo">
    <!--    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>-->
    <!--    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>-->
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

    <!-- 这里同样支持 laytpl 语法，如： -->
    {{#  if(d.auth > 2){ }}
    <!--    <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>-->
    {{#  } }}
</script>
</body>
</html>